﻿
<div class="easyui-panel" data-options="fit:true" style="padding:30px;">
    <table id="dg"></table>
</div>

<script>
    $(function () {
        var lastIndex = -1;
        var data = [
            { id: 1, code: "001", comId: "A", comName: "选项1", price: 1.1, fileValue: "a.jpg" },
            { id: 2, code: "002", comId: "B", comName: "选项2", fileValue: "b.jpg" },
            { id: 3, code: "003", comId: "C", comName: "选项3", price: "", fileValue: "c.jpg" }
        ];

        $('#dg').datagrid({
            data: data,
            idField: "id",
            columns: [[
                { field:"ck",checkbox:true },
                {
                    field: 'code', title: '编号', width: 100,
                    editor: {
                        type: "textbox",
                        options: {
                            required: true
                        }
                    },
                    styler: function (value, row) {
                        return "font-size:15px;";
                    }
                },
                {
                    field: 'comId', title: '名称', width: 100,
                    formatter: function (value, row) {
                        return row.comName;
                    },
                    editor: {
                        type: "combobox",
                        options: {
                            data: [{ comId: "A", comName: "选项1" }, { comId: "B", comName: "选项2" }, { comId: "C", comName: "选项3" }],
                            valueField: "comId",
                            textField: "comName",
                            onChange: function (newValue, oldValue) {
                                console.log("新：" + newValue);
                                console.log("旧：" + oldValue);
                                var tr = $(this).closest("tr.datagrid-row");
                                console.log(tr.attr("datagrid-row-index"));
                            }
                        }
                    }
                },
                {
                    field: 'price', title: '价格', width: 100, align: 'right',
                    editor: {
                        type: "numberbox",
                        options: {
                            min: 0,
                            required:false
                        }
                    },
                    formatter: function (val) {
                        return $.string.isNullOrWhiteSpace(val) ? 0 : val;
                    }
                }
            ]],
            onSelect: function (index, row) {
                if (lastIndex == -1) {
                    lastIndex = index;
                    $(this).datagrid("beginEdit", index);
                }
                else {
                    $(this).datagrid("endEdit", lastIndex);
                    lastIndex = index;
                    $(this).datagrid("beginEdit", index);
                }
            },
            onBeginEdit: function (index, row) {
                var t1 = $(this).datagrid("getEditor", { index: index, field: "code" });
                $(t1.target).textbox("textbox").attr("maxlength", "6");
            },
            onEndEdit: function (index, row, changes) {
                var ed = $(this).datagrid('getEditor', { index: index, field: 'comId' });
                //console.log(index);
                //console.log(row);
                var text = $(ed.target).combobox('getText');
                //console.log(text);
                row['comName'] = text;
            }
        });


    });
</script>